import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux';
import './index.less';

import { setStatusBackgroundColor } from '@/redux/actions';

function Me() {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(setStatusBackgroundColor('#727BFA')); // 设置状态栏颜色
  }, []);

  return (
    <div className="home-me fx1">
      {/* 顶部 */}
      <nav className="page-title">
        <span>个人中心</span>
        <i className="iconfont icon iconxiaoxi-"></i>
      </nav>

      {/* 头像部分 */}
      <article className="avatar-box fx fx-ai-c fx-jc-sb">
        <div className="left fx1 fx-d fx fx-jc-sa">
          <p className="name text-over">这是昵称</p>
          <p className="text text-over">个性签名啊啊啊啊啊啊啊啊啊</p>
        </div>
        <div className="right img-box fx0">
          <img className="img" src="" alt="" />
        </div>
      </article>
      {/*  */}

      {/* 中间卡片 */}
      <div className="page-card fx fx-ai-c">
        <span className="fx1">的期望和军队前往回去玩</span>
        <div className="fx fx-ai-c fx0 right">
          <span>点击详情</span>
          <i className="iconyoujiantou iconfont icon"></i>
        </div>
      </div>
      {/*  */}

      {/* 列表项 */}
      <ul className="page-list">
        <li className="li fx fx-ai-c">
          <i className="iconfont iconshoucang icon"></i>
          <span>直播统计</span>
        </li>
        <li className="li fx fx-ai-c">
          <i className="iconfont iconshoucang icon"></i>
          <span>直播统计</span>
        </li>
        <li className="li fx fx-ai-c">
          <i className="iconfont iconshoucang icon"></i>
          <span>直播统计</span>
        </li>
        <li className="li fx fx-ai-c">
          <i className="iconfont iconshoucang icon"></i>
          <span>直播统计</span>
        </li>
        <li className="li fx fx-ai-c">
          <i className="iconfont iconshoucang icon"></i>
          <span>直播统计</span>
        </li>
      </ul>
    </div>
  );
}

export default Me;
